<template>
  <div :id="charts.chart.id" style="min-width: 300px; min-height: 300px"/>
</template>

<script>
import lodash from 'lodash'
import echarts from 'echarts'
// import {LinearGradient} from 'echarts/lib/util/graphic'
import charts from '@/components/Charts/mixin/charts'

export default {
  mixins: [charts],
  data() {
    return {
      charts: {
        chart: {
          id: lodash.uniqueId('chart_'), // 保证全局唯一的 id，避免一个页面多个图表时 id 冲突
          instance: null, // charts mixin 时会通过混入的方式初始化 echarts 实例到这个属性
          xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'],
          seriesData: [],
          timer: null,
          // 这种函数写法 this 作用域为： charts.chart
          bind() { // 用于绑定图表事件: instance 初始化完成之后 mixin 触发
            this.updateOption()
            const zoomSize = 6
            this.instance.on('click', (params) => {
              this.instance.dispatchAction({
                type: 'dataZoom',
                startValue: this.xAxisData[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: this.xAxisData[Math.min(params.dataIndex + zoomSize / 2, this.seriesData.length - 1)]
              })
            })
            this.timer = setInterval(this.updateOption, 3000)
          },
          // 这种函数写法 this 作用域为： charts.chart
          unbind() { // 用于解绑图表事件: instance 销毁之前 mixin 触发
            this.instance.off('click')
            clearInterval(this.timer)
          },
          // 注意这里的函数定义写法同上面两个方法的区别，这里的 this 作用域为组件，因为这个方式是 setInterval 触发的，必须用这种形式定义
          updateOption: () => {
            const seriesShadowData = lodash.range(500, 520, 0)
            const seriesData = lodash.range(20).map(() => lodash.random(50, 450))
            this.charts.chart.instance.setOption({
              xAxis: {data: this.charts.chart.xAxisData},
              series: [
                {data: seriesShadowData},
                {data: seriesData}
              ]
            })
          },
          option: {
            title: {
              text: '渐变色 阴影 点击缩放',
              subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
            },
            grid: {left: '5%', right: '5%', bottom: '5%', containLabel: true},
            xAxis: {
              data: [],
              axisLabel: {inside: true, textStyle: {color: '#fff'}},
              axisTick: {show: false},
              axisLine: {show: false},
              z: 10
            },
            yAxis: {axisLine: {show: false}, axisTick: {show: false}, axisLabel: {textStyle: {color: '#999'}}},
            dataZoom: [{type: 'inside'}],
            series: [
              {
                /* For shadow*/
                type: 'bar',
                data: [],
                itemStyle: {color: 'rgba(0,0,0,0.05)'},
                barGap: '-100%',
                barCategoryGap: '40%',
                animation: false
              },
              {
                type: 'bar',
                data: [],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ])
                },
                emphasis: {
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: '#2378f7'},
                      {offset: 0.7, color: '#2378f7'},
                      {offset: 1, color: '#83bff6'}
                    ])
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}
</script>
